<!doctype html>
<html>
<title>主页</title>
<head>
	<style>
		body {
			margin: 0;
			padding: 0;
			height:100vh;
   			 /* 背景渐变 */
    		background: linear-gradient(200deg,#ddd6f3,#faaca8);
			font-family: Arial, sans-serif;
		}
		.container {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			margin-left: 50px;
			margin-top: 20px;
			height: 20vh;
		}
		.button {
			padding: 10px 20px;
            width: 200px;
            height: 350px;
            border: none;
			border-radius: 5px;
			background-size: cover;
			color: #232222;
			font-size: 20px;
			cursor: pointer;
			margin: 15px;
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
            text-align: center;
            
		}
        .button1 {
			background-image: url('./image/sta.png');
			background-size: cover;
		}
		.button2 {
			background-image: url('./image/tj.png');
			background-size: cover;
		}
		.button3 {
			background-image: url('./image/equipment.png');
			background-size: cover;
		}
		.button:hover {
			opacity: 0.8;
		}
        .button a {
			text-decoration: none;
			color: inherit;
			display: inline-block;
			background-color: transparent;
			width: 100%;
			height: 100%;
		}
		
	</style>
	 <link rel="stylesheet" href="btn.css"/>  
</head>
<div class="top">
	<div id="float-btn" onclick="backTodata()">
		<img src="./image/data1.png" width="40px" height="40px"></div>
</div>
<br></br>
<br></br>
<div style="text-align:center;">
<img src="./image/head.png" style="display:block; width:93%; height:auto; margin:auto;">
</div>
<div class="container">
		
        <div id="btn1" class="button button1" ><a href="stadium.html"></a></div>
        <div id="btn2" class="button button2"><a href="tjsport.html"></a></div>
        <div id="btn3" class="button button3"><a href="tool.html" ></a></div>
	
<body>
	<script>
	// 获取三个按钮元素
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");

// 给每个按钮添加鼠标悬停事件监听器
btn1.addEventListener("mouseover", function() {
  showInfo("全国大型体育场馆(含足球场),加载缓慢,请耐心等待",btn1);
});
btn2.addEventListener("mouseover", function() {
  showInfo("加载完后右下角查看露营地,潜水地,皮划艇俱乐部,垂钓园",btn2);
});
btn3.addEventListener("mouseover", function() {
  showInfo("户外装备表",btn3);
});

// 定义弹出信息窗口函数
function showInfo(msg,btn) {
  // 创建信息窗口元素
  var infoBox = document.createElement("div");
    infoBox.innerHTML = msg;
    infoBox.style.position = "absolute";
    // infoBox.style.top = btn.offsetTop + "px";
    // infoBox.style.left = btn.offsetLeft + btn.offsetWidth + "px";
	// 监听鼠标移动事件，更新信息窗口位置
	document.addEventListener("mousemove", function(event) {
  		var x = event.clientX;
  		var y = event.clientY;
  		infoBox.style.left = x + 10 + "px";
  		infoBox.style.top = y + 10 + "px";
	});
    infoBox.style.backgroundColor = "#fff";
    infoBox.style.border = "1px solid #ccc";
    infoBox.style.padding = "10px";
    infoBox.style.zIndex = "9999";
    document.body.appendChild(infoBox);
  
  // 给信息窗口元素添加鼠标移出事件监听器
  btn1.addEventListener("mouseout", function() {
    document.body.removeChild(infoBox);
  });
  btn2.addEventListener("mouseout", function() {
    document.body.removeChild(infoBox);
  });
  btn3.addEventListener("mouseout", function() {
    document.body.removeChild(infoBox);
  });
}
function backTodata(){
        window.open("data.html", "_self");
     }     
</script>
</body>
</html>